<template>
	<view class="content">
		
		<u-navbar
			title="我的订单"
			@leftClick="leftClick"
			:placeholder="true"
			:fixed="true"
			bgColor="#F8F8F8"
			:autoBack="true"
		>
		</u-navbar>
		<!-- 订单切换栏 -->
		<u-sticky 
			:customNavHeight="navHeight"
			bgColor="#F8F8F8"
		>
			<u-tabs
				:list="tab_list" 
				@click="tab_change"
				:sticky="true"
				lineColor="transparent"
				:activeStyle="{
					color: '#333333',
					fontWeight: 'bold',
					fontSize: '28rpx',
					transform: 'scale(1.05)',
					width: '128rpx'
				}"
				:inactiveStyle="{
					color: '#999999',
					transform: 'scale(1)',
					fontSize: '28rpx',
					width: '128rpx'
				}"
				:current="current"
			>
			</u-tabs>
		</u-sticky>
			
		
		<block v-for="(item, index) in 5">
			<view class="order_list_content" @click="gotopage('tuihuo')">
				<view class="ol_haed">
					<view class="order_number">订单编号：2020201020312312</view>
					<view class="order_status">待付款 00:00:00</view>
				</view>
				<view class="line_box">
					<u-line
						length="640rpx"
					>
					</u-line>
				</view>
				<!-- 商品详情css -->
				<view class="ol_info_content">
					<view class="ol_img_box">
						<image src="../../static/logo.png" class="ol_img"></image>
					</view>
					
					<view>
						<view class="ol_goods_info_box">
							<view class="ol_g_name">MAGIC DRAGON魔杰龙轻柔倍适学步裤</view>
						</view>
						
						<view class="ol_price_box">
							<view class="ol_g_size">尺寸：L</view>
							<!-- <view class="ol_price">￥1911.99</view> -->
							<view class="ol_number">X21</view>
							
						</view>
					</view>
				</view>
				
				<view class="ol_info_content">
					<view class="ol_img_box">
						<image src="../../static/logo.png" class="ol_img"></image>
					</view>
					
					<view>
						<view class="ol_goods_info_box">
							<view class="ol_g_name">MAGIC DRAGON魔杰龙轻柔倍适学步裤</view>
						</view>
						
						<view class="ol_price_box">
							<view class="ol_g_size">尺寸：L</view>
							<!-- <view class="ol_price">￥1911.99</view> -->
							<view class="ol_number">X21</view>
							
						</view>
					</view>
				</view>
				
				<!-- 商品合计 -->
				<view class="ol_goods_number_box">
					<view class="goods_num">共1件，</view>
					<view class="goods_all_price_name">合计：</view>
					<view class="goods_all_price">￥1911.99</view>
				</view>
				
				<!-- 水平线 -->
				<view class="line">
					
				</view>
				
				<!-- 按钮css -->
				<view class="button_content">
					
					<view class="button_one">立即支付</view>
					<view class="button_one">取消订单</view>
				</view>
			</view>
		</block>
		
		
		
		
		
	</view>
</template>

<script>
	export default {
			data() {
				return {
					navHeight: 0,
					tab_list: [{
						name: '全部订单',
					}, {
						name: '待支付',
					}, {
						name: '待收货'
					}, {
						name: '已完成'
					}, {
						name: '售后'
					}],
					current: 0,
				}
			},
			onLoad(){
				let navHeightTemp = uni.getSystemInfoSync().statusBarHeight + 44;
				this.navHeight = navHeightTemp;
			},
			methods:{
				tab_change(e){
					this.current = e.index;
					console.log(e)
				},
				leftClick(e){
					console.log(e)
					uni.navigateBack({
						delta:1
					})
				},
				gotopage(param){
					if(param == 'tuihuo'){
						uni.navigateTo({
							url:'/pages/order/order_shouhoushengqing/tuihuo/tuihuo'
						})
					}
				}
			}
		}
</script>

<style>
	page {
		background: #F8F8F8;
	} 
	.content{
		
	}
	/* 导航头部css */
	.order_head{
		margin-top: 20upx;
	}
	.order_div{
		margin-right: 40upx;
		width: 128upx;
		height: 44upx;
		/* background-color: #007AFF; */
		font-weight: 500;
		color: #333333;
		line-height: 44upx;
		font-size: 32upx;
		text-align: center;
	}
	
	/* 订单列表css */
	.order_list_content{
		display: flex;
		margin: 32upx 28upx;
		background-color: #FFFFFF;
		flex-direction:column;
	}
	
	/* 订单抬头 */
	.ol_haed{
		display: flex;
		justify-content: space-between;
		margin: 38upx 26upx 0 26upx;
	}
	
	.ol_haed .order_number{
		/* width: 364upx;
		height: 40upx; */
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40upx;
	}
	
	.ol_haed .order_status{
		/* width: 204upx;
		height: 40upx; */
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FF5739;
		line-height: 40upx;
	}
	
	/* 商品详情css */
	.ol_info_content{
		display: flex;
		justify-content: flex-start;
		margin: 54upx 24upx 24upx 24upx;
	}
	
	.ol_info_content .ol_img_box{
		width: 198upx;
		height: 198upx;
		background: #D8D8D8;
	}
	.ol_info_content .ol_img{
		width: 198upx;
		height: 198upx;
	}
	
	/* 商品名字-尺寸css */
	.ol_goods_info_box{
		display: flex;
		flex-direction: column;
		margin: 0 0upx 0 14upx;
	}
	.ol_g_name{
		/* width: 328upx;
		height: 88upx; */
		font-size: 32upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 44upx;
		
		margin-bottom: 20upx;
	}
	.ol_g_size{
		
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 34upx;
		opacity:0.5;
	}
	.ol_price_box{
		display: flex;
		margin-top: 8upx;
		margin-left: 14upx;
		width: 418upx;
		justify-content: space-between;
	}
	.ol_price{
		font-size: 28upx;
		font-family: DINAlternate-Bold, DINAlternate;
		font-weight: bold;
		color: #333333;
		line-height: 40upx;
		margin-bottom: 20upx;
	}
	
	.ol_number{
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 40upx;
	}
	
	.ol_goods_number_box{
		/* background-color: #4CD964; */
		display: flex;
		justify-content: flex-end;
		margin-right: 26upx;
		align-items: baseline;
	}
	
	.goods_num{
		
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 40upx;
	}
	.goods_all_price_name{
		/* width: 84upx;
		height: 40upx; */
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 40upx;
	}
	.goods_all_price{
		/* width: 110upx; */
		/* height: 60upx; */
		font-size: 44upx;
		/* font-family: PingFangSC-Medium, PingFang SC; */
		font-weight: 550;
		color: #333333;
		/* line-height: 60upx; */
		text-align: justify;
	}
	
	.line{
		width: 646upx;
		height: 4upx;
		background: #D8D8D8;
		opacity: 0.2;
		position: relative;
		margin: 0 auto;
		margin-top: 18upx;
	}
	
	/* 按钮css */
	.button_content{
		margin-top: 18upx;
		display: flex;
		justify-content: flex-end;
		margin-right: 24upx;
		margin-bottom: 24upx;
		margin-top: 18upx;
	}
	
	.button_one{
		width: 206upx;
		height: 70upx;
		border-radius: 8upx;
		border: 2upx solid #979797;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 16upx;
		
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: bold;
		box-sizing: border-box;
	}
	.line_box{
		margin-top: 24upx;
		margin-left: 28upx;
	}
</style>
